<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="roleName" label="角色名称" width="180" />
            <!-- <el-table-column prop="roleName" label="图标" width="180" /> -->
            <el-table-column label="操作">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-button type="primary" round @click="handleUpdata(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button type="danger" round>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="更新角色">
            <el-form :model="updataForm" status-icon>
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="updataForm.roleName" />
                </el-form-item>
                <el-form-item label="角色权限" prop="rights">
                    <el-tree :data="rightList" show-checkbox node-key="path" 
                    :props="defaultProps"
                    :default-checked-keys='updataForm.rights'
                    ref='treeRef'
                    :check-strictly="true"
                    />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted,nextTick } from 'vue'
import axios from 'axios'
const tableData = ref([]) // 角色列表
const rightList = ref([]) // 权限列表
const treeRef = ref(null) // 权限树
const defaultProps = {
    // children: 'children',
    label: 'title'
}
onMounted(() => {
    getRoleList()
    getRightList()
})
// 获取角色列表
const getRoleList = async () => {
    let res = await axios.get('/adminapi/roles')
    tableData.value = res.data
}
// 获取角色列表
const getRightList = async () => {
    let res = await axios.get('/adminapi/rights')
    rightList.value = res.data
}

// 编辑角色
const dialogVisible = ref(false)
const updataForm = ref([])
const handleUpdata = (row) => {
    console.log(row)
    dialogVisible.value = true
    updataForm.value = row
    // 使用nextTick，确保dom已经渲染完毕，因为第一次渲染的时候，treeRef还没有渲染完毕，所以会报错
    nextTick(()=>{
        treeRef.value.setCheckedKeys(row.rights)
    })
    
}
// 确认按钮
const handleConfirm = async() => {
    dialogVisible.value = false
    // console.log(updataForm.value.roleName)
    // console.log(treeRef.value.getCheckedKeys())
    // console.log(updataForm.value._id)
    // 更新角色
    await axios.put(`/adminapi/roles/${updataForm.value._id}`, {
        roleName: updataForm.value.roleName,
        rights: treeRef.value.getCheckedKeys()
    })
    await getRoleList()
}
// 删除
const handleDelete = async (row) => {
    console.log(row)
    await axios.delete(`/adminapi/roles/${updataForm.value._id}`)
    await getList()
}
</script>